<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search
      v-model="searchVal"
      placeholder="搜索关键词"
      disabled
      @click="$router.push('/home/searchPopup')"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
      <van-swipe-item v-for="item in banner" :key="item.id"
        ><img :src="item.image_url" alt="" width="100%"
      /></van-swipe-item>
    </van-swipe>

    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>

    <!-- 页面出现弹出框，弹出框中出现底层页面的内容，应该如何处理: -->
    <!-- v-show的值不能写死,且必须和路径相关 -->
    <transition name="van-fade">
      <!-- 如果是首页就展示这些内容 -->
      <div v-show="$route.path === '/home'">
        <!-- 使用组件 -->
        <!-- 首页频道 -->
        <Grid :channelArr="channelArr"></Grid>
        <!-- 首页 品牌制造商直供 -->
        <div class="newGoodsList">
          <div class="title">品牌制造商直供</div>
          <Brand :brandList="brandList" />
        </div>
        <!-- 首页 周一周四 新品首发 -->
        <div class="newGoodsList">
          <div class="title">周一周四·新品首发</div>
          <Products :goodsList="newGoodsList" />
        </div>
        <!-- 人气推荐 -->

        <!-- 首页专题精选 -->
        <Topic :topicList="topicList"></Topic>
        <!-- 居家餐厨...... -->
        <div class="categoryList" v-for="item in categoryList" :key="item.id">
          <div class="title">{{ item.name }}</div>
          <Products :goodsList="item.goodsList" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { GetHomeData } from "../request/api.js";
// 引入组件
import Grid from "../components/home/Grid.vue";
import Topic from "../components/home/Topic.vue";
import Products from "../components/Products.vue";
import Brand from "../components/home/Brand.vue";
export default {
  // 注册组件
  components: {
    Grid,
    Topic,
    Products,
    Brand,
  },
  name: "Home",
  data() {
    return {
      searchVal: "",
      banner: [],
      channelArr: [],
      topicList: [],
      newGoodsList: [],
      categoryList: [],
      brandList: [],
    };
  },
  created() {
    // http://kumanxuan1.f3322.net:8001
    GetHomeData().then((res) => {
      // console.log("已经封装了api",res.data);
      // console.log(res.data.hotGoodsList);
      let {
        banner,
        channel,
        topicList,
        newGoodsList,
        categoryList,
        brandList,
      } = res.data;
      // console.log(banner)
      this.banner = banner;
      this.channelArr = channel;
      this.topicList = topicList;
      this.newGoodsList = newGoodsList;
      this.categoryList = categoryList;
      this.brandList = brandList;
    });
  },
};
</script>
<style>
/* vue原生过渡写法（组件中不用书写需要过渡的属性） name为slide
    .slide-enter,.slide-leave-to{
        过渡开始状态
        right: -100%;
    }
    .slide-enter-active,.slide-leave-active{
        transition: all .5s;
    }
    .slide-enter-to,.slide-leave{
       过渡结束状态 
        right: 0;
    }
 */
.home {
  padding-bottom: 0.5rem;
}
.title {
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  background-color: white;
  margin-top: 0.2rem;
}
</style>